<script setup>
  import { getArticleListApi } from '@/api/article'
  import LvCitySelect from '@/components/LvCitySelect.vue'
  import useTable from '@/hooks/useTable'
  import { ref, toRaw } from 'vue'

  // 表格相关业务逻辑
  const { tableData, loading, pager, queryForm, getData, pageChange } = useTable({
    apiFn: getArticleListApi
  })

  const columnList = [
    { type: 'text', format: (row) => row.author_data[0].nickname, label: '作者', width: '120px' },
    { type: 'text', prop: 'time', label: '发布时间', width: '120px' },
    { type: 'text', format: (row) => row.city + '-' + row.address, label: '位置', width: '180px' },
    { type: 'text', prop: 'title', label: '标题' },
    { type: 'slot', label: '操作', width: '160px' }
  ]

  const timeChange = (value) => {
    queryForm.sTime = value[0]
    queryForm.eTime = value[1]
  }

  // 抽屉弹窗
  const drawerVisible = ref(false)
  const currentArticle = ref({})

  const showDrawer = (row) => {
    currentArticle.value = toRaw(row)
    drawerVisible.value = true
  }
</script>

<template>
  <div class="user-view content">
    <!-- 搜索区域 -->
    <LvSearch @search="getData">
      <LvSearchItem :col="7" label="作者">
        <el-input placeholder="请输入作者名" clearable v-model="queryForm.author" />
      </LvSearchItem>
      <LvSearchItem :col="10" label="发布时间">
        <el-date-picker style="width: 100%" v-model="queryForm.time" type="daterange" range-separator="-" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" @change="timeChange" />
      </LvSearchItem>
      <LvSearchItem :col="7" label="城市">
        <LvCitySelect v-model="queryForm.city" placeholder="请输入城市名" />
      </LvSearchItem>
    </LvSearch>
    <!-- 表格区域 -->
    <LvTable :data="tableData" :loading="loading" :columnList="columnList">
      <template #opera="{ row }">
        <el-button type="success" @click="showDrawer(row)">查看详情</el-button>
      </template>
    </LvTable>
    <!-- 分页区域 -->
    <LvPagination :total="pager.total" :page="pager.page" @change="pageChange" />

    <!-- 抽屉弹窗 -->
    <el-drawer v-model="drawerVisible" size="30%" destroy-on-close :with-header="false">
      <div class="article-detail">
        <!-- 视频区域 -->
        <div class="video-view" v-if="currentArticle.fileType === 'video'">
          <video :src="currentArticle.videoUrl.url" controls></video>
        </div>
        <!-- 轮播图区域 -->
        <div class="swiper-view" v-if="currentArticle.fileType === 'image'">
          <el-carousel height="300px">
            <el-carousel-item v-for="(item, index) in currentArticle.image" :key="index">
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 作者信息 -->
        <div class="author-view">
          <img :src="currentArticle.author_data[0].avatarUrl" alt="" />
          <div>
            <p>{{ currentArticle.author_data[0].nickname }}</p>
            <p>{{ currentArticle.time }}</p>
          </div>
        </div>
        <!-- 地址标签 -->
        <div class="address-view">
          <div class="tag">{{ currentArticle.province }}</div>
          <div class="tag">{{ currentArticle.address }}</div>
          <div class="tag">{{ currentArticle.city }}</div>
        </div>
        <div class="main">
          <!-- 标题 -->
          <div class="title">{{ currentArticle.title }}</div>
          <!-- 内容 -->
          <div class="content">{{ currentArticle.content }}</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-drawer__body) {
    padding: 0;
  }
  .article-detail {
    overflow-x: auto;
    .video-view,
    .swiper-view {
      width: 100%;
      height: 300px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .author-view {
      box-shadow: 0 0 15px #ca7e7c33;
      border-radius: 5px;
      padding: 10px;
      background: #ffffff;
      margin: 10px;
      box-sizing: border-box;
      align-items: center;
      display: flex;
      img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        display: block;
        border-radius: 50%;
      }
      div {
        padding-left: 10px;
        p {
          margin: 0;
        }
        p:nth-child(1) {
          font-weight: 700;
        }
      }
    }
    .address-view {
      display: flex;
      margin: 10px;
      flex-wrap: wrap;
      .tag {
        background-color: gold;
        margin: 0 10px 10px 0;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 700;
        padding: 5px 15px;
      }
    }
    .main {
      margin: 10px;
      .title {
        font-weight: 700;
        font-size: 18px;
        padding: 10px 0;
      }
      .content {
        line-height: 1.5;
      }
    }
  }
</style>
